<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        border: 1px solid red;
        height: 600px;
        width: 100%;
        position: absolute;
        top: 200px;
      }
      h3 {
        width: 50px;
        top: 100px;
        height: 50px;
        border: 1px solid red;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h3>3</h3>
    </div>
    <!-- 
        absolute 、 position 、 fixed
        relative 相对于自身的位置进行定位
        absolute 相对于最近的有定位的祖先元素进行定位
        fixed 相对于浏览器窗口进行定位
                --------  
        水平居中
        inline元素： text-align:center;
        block元素： margin:auto
        absolute元素：left:50% + margin-left:-元素宽度的一半;

        垂直居中
        inline元素： line-height: 元素高度;
        absolute元素：top:50% + margin-top:-元素高度的一半;
        absolute元素：transform:translate(-50%,-50%);
        absolute元素：top,left,bottom,margin =0 + margin: auto


        多行文本居中
        父元素： /* 1.行高和高度相同 */
                line-height: 500px;
        子元素：
              /* 2.line-height设置为normal */
               line-height: normal;
               /* 3.设置为行内块状元素 */
               display: inline-block;
              /* 4.垂直居中 */
               vertical-align: middle;
    -->
  </body>
</html>
